<template>
    <div>
        <p>订单号<el-input class="order-input" v-model="orderNo" placeholder="订单号" style="width:200px" @blur="referOrderNo"></el-input>
        收件人<el-input class="order-input" v-model="recipients" placeholder="收件人" @blur="referOrderconsignee" style="width:200px"></el-input>
        手机号<el-input class="order-input" v-model="phone" placeholder="手机号" @blur="referOrderphone" style="width:200px"></el-input>
          订单状态<el-select  class="order-input" v-model="state" @change="referOrderstate"  placeholder="订单状态">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></p>
    <p>选择时间<el-date-picker class="order-input"  type="datetimerange"  v-model="dateSection" :value="time" :value-format="format" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
  </el-date-picker><el-button type="primary" @click="referOrderDate">查询</el-button></p>
  <div class="table-box"><el-table
    :data="tableData" border style="width: 100%">
    <el-table-column fixed prop="orderNo" label="订单号" width="70" ></el-table-column>
    <el-table-column prop="deliveryTime" label="下单时间" width="160"></el-table-column>
    <el-table-column prop="phone" label="手机号" width="140"></el-table-column>
    <el-table-column prop="consignee" label="收货人" width="140"></el-table-column>
    <el-table-column label="配送地址" width="170">
      <template slot-scope="scope">
        <span class="textset">{{scope.row.deliverAddress}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="orderTime" label="送达时间" width="160"></el-table-column>
    <el-table-column  label="用户备注" width="120">
      <template slot-scope="scope">
        <span class="textset">{{scope.row.remarks}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="orderAmount" label="订单金额" width="100"></el-table-column>
    <el-table-column prop="orderState" label="订单状态" width="80"></el-table-column>
    <el-table-column fixed="right" label="操作" >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
        <el-button type="text" size="small" @click=" OrderAmend(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table></div>
        <div class="block idlist-page">
         <el-pagination @size-change="handleSizeChange" :current-page="currentPage" :page-sizes="pagesizeset" :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"  @current-change="page"> </el-pagination>
    </div>
    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="30%" >
      <p class="addcate-p"><span class="addcate-span">订单号:</span> <span class="addcate-text">{{order.orderNo}}</span></p>
      <p class="addcate-p"><span class="addcate-span">收货人:</span> <span class="addcate-text">{{order.consignee}}</span></p>
      <p class="addcate-p">下单时间:<span class="addcate-text">{{order.deliveryTime}}</span></p>
      <p class="addcate-p"><span class="addcate-span">手机号:</span> <span class="addcate-text">{{order.phone}}</span></p>
      <p class="addcate-p">配送地址:<span class="addcate-text">{{order.deliverAddress}}</span></p>
      <p class="addcate-p">送达时间:<span class="addcate-text">{{order.orderTime}}</span></p>
      <p class="addcate-p">用户备注:<span class="addcate-text">{{order.remarks}}</span></p>
      <p class="addcate-p">订单金额:<span class="addcate-text">{{order.orderAmount}}</span></p>
      <p class="addcate-p">订单状态:<span class="addcate-text">{{order.orderState}}</span></p>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
 <el-dialog title="修改订单" :visible.sync="Amend" width="30%" >
      <p class="addcate-p"><span class="addcate-span">订单号:</span> <el-input disabled class="addcate-text" style="width:300px" placeholder="订单号" v-model="order.orderNo"></el-input></p>
       <p class="addcate-p"><span class="addcate-span">收货人:</span> <el-input disabled class="addcate-text" style="width:300px" placeholder="收货人" v-model="order.consignee"></el-input></p>
      <p class="addcate-p">下单时间:<el-input class="addcate-text" style="width:300px" placeholder="下单时间" v-model="order.deliveryTime"></el-input></p>
      <p class="addcate-p"><span class="addcate-span">手机号:</span> <el-input class="addcate-text" style="width:300px" placeholder="手机号" v-model="order.phone"></el-input></p>
    <p class="addcate-p">配送地址:<el-input class="addcate-text" style="width:300px" placeholder="配送地址" v-model="order.deliverAddress"></el-input></p>
      <p class="addcate-p">送达时间:<el-input class="addcate-text" style="width:300px" placeholder="送达时间" v-model="order.orderTime"></el-input></p>
      <p class="addcate-p">用户备注:<el-input class="addcate-text" style="width:300px" placeholder="用户备注" v-model="order.remarks"></el-input></p>
      <p class="addcate-p">订单金额:<el-input class="addcate-text" style="width:300px" placeholder="订单金额" v-model="order.orderAmount"></el-input></p>
      <p class="addcate-p">订单状态:<el-input class="addcate-text" style="width:300px" placeholder="订单状态" v-model="order.orderState"></el-input></p>
    <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="confirmAmend" >确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>

<script>
import {getOrderList,amendOrder} from '@/apis/goods';
import {TimeTransition} from '@/utils/utils'
    export default {
        data(){
            return{
                orderNo:'',
                recipients:'',
                phone:'',
                state:'已完成',
                format:'yyyy-MM-dd HH:mm:ss',
                dateSection:'',
                 time: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                 options: [{
                    value: '已完成',
                    label: '已完成'
                  }, {
                    value: '已受理',
                    label: '已受理'
                  },{
                    value: '派送中',
                    label: '派送中'
                  }],
                tableData: [],
                total:0,
                currentPage: 1,
                  pagesize:5,
                pagesizeset:[5, 10],
                 dialogVisible: false,
                 Amend:false,
                 order:{},
               
            }
        },
        //查询按钮
        methods:{
             handleClick(row) {
              this.order=row;
              this.dialogVisible= true;
         },
        
         //每一页数据的条数
          page(p){
            this.currentPage=p;
             this.getList({currentPage:this.currentPage,pageSize:this.pagesize})
          },
          //第几页
          handleSizeChange(i){
            this.pagesize=i;
             this.getList({currentPage:this.currentPage,pageSize:this.pagesize})
          },
          //获取后台数据
        getList(inquire){
          getOrderList(inquire).then(res=>{
            for(let v of res.data.data){
              v.deliveryTime=TimeTransition(v.deliveryTime)
              v.orderTime=TimeTransition(v.orderTime)
            }
            this.tableData=res.data.data;
            this.total=res.data.total;
          })
        },
        //通过订单号查询
        referOrderNo(){
          this.getList({currentPage:this.currentPage,pageSize:this.pagesize,orderNo:this.orderNo})
        },
        //通过收件人查询
        referOrderconsignee(){
          this.getList({currentPage:this.currentPage,pageSize:this.pagesize,consignee:this.recipients})
        },
        //通过手机号查询
        referOrderphone(){
          this.getList({currentPage:this.currentPage,pageSize:this.pagesize,phone:this.phone})
        },
        //通过订单状态查询
        referOrderstate(){
          this.getList({currentPage:this.currentPage,pageSize:this.pagesize,orderState:this.state})
        },
        //通过订单时间查询
        referOrderDate(){
          this.getList({currentPage:this.currentPage,pageSize:this.pagesize,date:this.dateSection})
        },
      OrderAmend(row){
        this.order=JSON.parse(JSON.stringify(row));
         this.Amend=true
      },
      confirmAmend(){
          this.$confirm('此操作将改变此订单信息, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
              .then(() => {
                amendOrder(this.order).then(res=>{
                    if(res.data.code==0){
                        this.$message({type: 'success',message: '臭臭世界提示:修改成功!',center: true});
                       this.Amend=false
                     this.getList({currentPage:this.currentPage,pageSize:this.pagesize})
                    }else{
                        this.$message({type: 'error',message: '臭臭世界提示:修改失败!',center: true});
                    }
                })
                 })
                 .catch(() => {this.$message({type: 'success',message: '臭臭世界提示:已取消成功',center: true});});  
      },
      cancel(){
        this.Amend=false
                     this.getList({currentPage:this.currentPage,pageSize:this.pagesize})
      }
        },
       //加载页面时进行渲染
        created(){
          this.getList({currentPage:this.currentPage,pageSize:this.pagesize})
        }
    }
</script>

<style lang="less" scoped>
.order-input{
    margin: 0 5px;
}
p{
    margin-top: 20px;
}
.table-box{
    margin-top: 20px;
    // overflow-x: scroll;
}
.idlist-page {
  padding: 20px;
  padding-bottom: 0;
}
.textset{
  white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.addcate-p{
    margin-bottom: 20px;
    display: flex;
    padding-left: 50px;
}
.addcate-text{
  font-weight: bold;
    margin-left: 20px;
    flex: 1;
}
.addcate-span{
    margin-left:16px;
    
}
</style>